<template>
  <div>
    <div :style="bgimg" class="register">
      <center>
        <Form
          ref="formInline"
          :model="formInline"
          :rules="ruleInline"
          :label-width="labelWidth"
          style="padding-top:30px;"
        >
          <FormItem>
            <div class="login_text">今日头条后台注册</div>
          </FormItem>
          <FormItem label="用户名" prop="user" style="width:300px">
            <Input type="text" v-model="formInline.user" placeholder="用户名"></Input>
          </FormItem>
          <FormItem label="密码" prop="password" style="width:300px">
            <Input type="password" v-model="formInline.password" placeholder="请输入密码"></Input>
          </FormItem>
          <FormItem label="密码" prop="passwordConfirm" style="width:300px">
            <Input type="password" v-model="formInline.passwordConfirm" placeholder="请再输入密码"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleLogin">已有账户</Button>
            <Button type="primary" @click="handleSkip('formInline')">注册</Button>
          </FormItem>
        </Form>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validateUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.formInline.passwordConfirm !== "") {
          // 对第二个密码框单独验证
          this.$refs.formInline.validateField("passwordConfirm");
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formInline.password) {
        callback(new Error("两次输入的密码不匹配!"));
      } else {
        callback();
      }
    };
    return {
      labelWidth: 60,
      bgimg: {
        backgroundImage: "url(" + require("../assets/loginb.jpg") + ")"
      },
      formInline: {
        user: "",
        password: ""
      },
      //表单验证
      ruleInline: {
        user: [
          {
            validator: validateUser,
            trigger: "blur"
          }
        ],
        password: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      this.$router.push("/");
    },
    handleSkip(name) {
      if (this.handleRegister()) {
        this.$Message.success("注册成功!");
      }
      // this.$refs[name].validate(valid => {
      //   if (valid) {

      //   } else {
      //     this.$Message.error("失败!");
      //   }
      // });
    },
    handleRegister() {
      let url = "/register";
      var bo = false;
      var TUser = {
        uName: this.formInline.user,
        uNick: this.formInline.user,
        uAdmin: 1,
        uPassword: this.formInline.password
      };
      axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        data: TUser
      })
        .then(response => {
          bo = true;
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

      return bo;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register {
  width: 550px;
  height: 350px;
  margin-left: 500px;
  margin-top: 150px;
  background-image: rgba(0.1);
}
.register_text {
  font-size: 40px;
}
.login_text {
  font-size: 50px;
}
</style>
